<template>
  <div class="Login">
    <h2 style="padding-top: 60px;padding-left: 30px;font-size: 28px;">智慧医院便民平台</h2>
    <p style="padding-top: 10px;padding-left: 30px;">开启智慧医疗新时代</p>
    <div class="box">
      <div class="tab">
        <button @click="navigate('yan')" :style="{ color: activeButton === 'yan' ? 'blue' : 'black' }">验证码登录</button>
        &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="navigate('phone')" :style="{ color: activeButton === 'phone' ? 'blue' : 'black' }">密码登录</button>
        &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="navigate('face')" :style="{ color: activeButton === 'face' ? 'blue' : 'black' }">人脸登录</button>
      </div>
      <div id="faceLogin">
        <div id="faceLogin_video">
          <video ref="videoRef" autoplay />
        </div>
        <canvas ref="canvasRef" style="display: none" />
        <van-button type="primary" block @click="capture"
          style="margin-top: 40px;border-radius: 30px;width:80%;margin-left:30px;">登录
        </van-button>
      </div>
      <p style="text-align: center;padding-top: 30px;">
        <van-icon name="wechat" size="1rem" />微信一键登录注册
      </p>
      <p style="padding-top: 80px;padding-left: 30px;display: flex; align-items: center;">
        <span><van-checkbox v-model="checked" icon-size="15px" is-link @click="showPopup"></van-checkbox></span>
        <span>我已阅读并同意</span>
        <span class="xie">隐私政策</span>
        <span class="xie">用户协议</span>
        <span>和</span>
        <span class="xie">平台协议</span>
      </p>
      <van-popup v-model:show="show" :style="{ padding: '64px', color: 'grey', paddingTop: '20px', fontSize: '17px' }">
        <h2 :style="{ color: 'black', paddingLeft: '60px' }">隐私声明</h2>
        <span>您需要同意</span>
        <span :style="{ color: 'black', fontWeight: '700' }">《隐私权政策》</span>
        <span>并完成注册后方可继续操作，请您充分阅读并接受全部内容后点击同意。</span><br />
        <span>
          &nbsp;&nbsp;请您仔细阅读《隐私权政策》。我们依据国家最新法规要求，更新了《隐私权政策》，特此向您说明如下:
        </span><br />
        1、为向您提供交易、服务、社区等相关功能或服务,我们会收集、使用您的必要信息;<br />
        2、摄像头、麦克风、相册、GPS等敏感权限均不会默认开启,只有经过您明示授权的前提下才会为实现某项功能或服务时使用<br />
        <p>
          <button @click="disagree"
            :style="{ border: 'none', background: 'none', paddingLeft: '90px', color: disagreeClicked ? 'red' : 'black' }">不同意</button>
          <button @click="agree"
            :style="{ border: 'none', background: 'none', paddingLeft: '30px', color: agreeClicked ? 'red' : 'black' }">同意</button>
        </p>
      </van-popup>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter()
// 按钮切换转换样式
const activeButton = ref('face');
const checked = ref(false);
const disagreeClicked = ref(false);
const agreeClicked = ref(false);
const navigate = (button) => {
  activeButton.value = button;
  if (button === 'yan') {
    router.push('/login')
  } else if (button === 'phone') {
    router.push('/phone')
  } else if (button === 'face') {
    router.push('/face')
  }
};
const setup = () => {
  return {
    activeButton,
    navigate,
  }
}
setup()
// 阅读协议
const show = ref(false);
const showPopup = () => {
  show.value = true;//显示弹窗
  agreeClicked.value = false;//重置按钮状态
  disagreeClicked.value = false;//重置按钮状态
};
const agree = () => {
  checked.value = true;//用户同意协议
  agreeClicked.value = true;//同意按钮被点击
  disagreeClicked.value = false;//重置按钮状态
  show.value = false;//隐藏弹窗
}
const disagree = () => {
  checked.value = false;//用户不同意协议
  disagreeClicked.value = true;//同意按钮被点击
  agreeClicked.value = false;//重置按钮状态
  show.value = false;//隐藏弹窗
}

const videoRef = ref(null);
const canvasRef = ref(null);
const capturedImages = ref([]);
const startCamera = async () => {
  const stream = await navigator.mediaDevices.getUserMedia({ video: true });
  if (videoRef.value) {
    videoRef.value.srcObject = stream;
  }
};
const capture = async () => {
  // 校验协议是否勾选
  if (!checked.value) {
    alert('请先勾选用户协议和平台协议');
    return; // 结束函数，阻止继续执行
  }
  const canvas = canvasRef.value;
  const context = canvas.getContext('2d');
  context.drawImage(videoRef.value, 0, 0, canvas.width, canvas.height);
  const imageSrc = canvas.toDataURL('image/jpeg');
  capturedImages.value.push(imageSrc);
  await submitImages(imageSrc);
};
const submitImages = async (img) => {
  try {
    const res = await axios.post('http://localhost:3000/faceLogin', { b64: img });
    if (res.data.code === 200) {
      sessionStorage.setItem('userid', res.data.user._id);
      sessionStorage.setItem('user', res.data.user.username);
      console.log(res.data.user.username);
      
      sessionStorage.setItem('user', JSON.stringify(res.data.user[0]));
      localStorage.setItem('token', res.data.token);
      sessionStorage.setItem('user', JSON.stringify(res.data.user));

      router.push('/home');
    } else {
      alert(res.data.msg);
    }
  }
  catch (error) {
    console.error(error);
  }
};
onMounted(() => {
  startCamera();
});

</script>

<style lang="scss" scoped>
.box {
  margin-top: 40px;
}

.tab {
  margin-left: 30px;
  margin-bottom: 40px;

  button {
    border: 0;
    background: none;
    color: black;
  }

  button .active {
    color: rgb(76, 138, 251);
  }
}

.xie {
  color: rgb(76, 138, 251);
  padding-left: 5px;
  padding-right: 5px;
}

#faceLogin {
  width: 390px;
}

#faceLogin_video {
  margin-left: 30px;
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  width: 300px;
  height: 200px;
  /* 将视频容器设置为圆形 */
  overflow: hidden;
  /* 避免视频溢出圆形容器 */
  position: relative;
  /* 设置相对定位，方便绝对定位其他元素 */
}

#faceLogin_video video {
  width: 100%;
  /* 视频宽度填充父容器 */
  border-radius: 20%;
  /* 高度自适应 */
}
</style>